<template>
	<div class="my_superior_popup">
		<van-popup v-model:show="show">
			<main>
				<div class="list_item">
					<van-image round width="45px" height="45px" fit="cover" :src="item?.head_img_url" />
					<div class="right">
						<div class="info">
							<div class="name">
								<span>{{ item?.nick_name }}</span>
							</div>
<!--							<div v-if="item?.mobile" class="address">电话: {{ item?.mobile }}</div>-->
						</div>
						<a :href="tel" v-if="item?.mobile">
							<img class="delete" src="@/assets/img/tel_btn.png" v-debounce="callMobile" />
						</a>
					</div>
				</div>
			</main>
		</van-popup>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue';

const emits = defineEmits<{
	(event: 'update:show'): void;
}>();

const props = defineProps<{
	item?: any;
	show: boolean;
}>();

const show = computed<boolean>({
	get() {
		return props.show;
	},
	set() {
		emits('update:show');
	}
});

let tel = ref<string>('#');

const callMobile = () => {
	tel.value = `tel:${props.item?.mobile}`;
};
</script>

<style lang="scss" scoped>
.my_superior_popup {
	:deep(.van-popup) {
		border-radius: 5px;
	}

	main {
		width: 80vw;
		background: url('@/assets/img/user_bg.png');
		background-size: cover;
		.list_item {
			@include flx-justify-between;
			height: fit-content;
			box-sizing: border-box;
			padding: 15px;
			border-radius: 5px;
			color: white;
			.right {
				@include flx-justify-between;
				height: 100%;
				flex: 1;
				margin-left: 10px;
				.info {
					.name {
						@include flx-align-center;
						margin-bottom: 5px;
						font-size: 16px;
						font-weight: bold;
						.vip {
							width: 16px;
							height: 14px;
							margin-left: 5px;
						}
						.certification {
							width: 54px;
							height: 20px;
							margin-left: 5px;
						}
					}
					.address {
						font-size: 12px;
						font-family: Noto Sans S Chinese;
						font-weight: 400;
					}
				}
				.delete {
					width: 63px;
					height: 28px;
					object-fit: cover;
				}
			}
		}
	}
}
</style>
